<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>充值中心</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://tb1.bdstatic.com/??/tb/static-common/style/tb.js/dialog_29a9417.css,/tb/static-common/lib/tbui/style/all_1888f28.css" />
<link rel="stylesheet" href="http://tb1.bdstatic.com/??/tb/_/index_7712603.css,/tb/_/search_2e2269a.css" />
<link type="text/css" rel="stylesheet" href="/wx/css/ddSecond.css"/>
<script type="text/javascript" src="/wx/js/Chart.js" ></script>
<style>
	body {
		width: 100%;
		height: 100%;
		background: url(/wx/images/bg1.jpg) no-repeat center fixed;
		-webkit-background-size: 100% 100%;
		font-family: "微软雅黑";
	}
</style>
</head>
<body >
	<div class="chongzhi-topDIV">
		<div class="shuxian"></div>
		<img class="chongzhi-img" src="/wx/images/chongzhibg.png"/>
		<div class="chongzhi-imgTop">
	    	<p class="chongzhi-ContentTop" >当前使用流量</p>
	       	<font id="liuliang" style="font-size: 23px;color:#fff; p-weight: bold;" ></font>
	       	<font style="font-size: x-small;color:#fff;padding-left: 0px;">M</font>
	       	<div style="float: right;margin-top: -10px;">
		    	<p  style="font-size: 10px;color:#a5c0d5;">总共流量：<span style="color: #fff;">${detail.totalData}M</span></p>
				<p />
				<p style="font-size: 10px;color:#a5c0d5 ;">剩余流量：<span style="color: #fff;">${detail.remain}M</span></p>
			</div>
	        <div class="chongzhi-SIM">
	        	<p style="font-size: 11px;color:#fff;line-height: 18px;">SIM卡号
	            <span style="color: #a5c0d5;padding-left: 3px;">${detail.sim}</span>
	            	<img id="yi" src="/wx/images/yichongzhi.png" style="width:30px;margin-left: 7px;display:none;">
	            </p>
	            </p>
	            <p class="chongzhi-ICCID">ICCID号  <span style="color: #a5c0d5;padding-left: 6px;">${detail.iccid}</span></p><p/>
	            <p id="status" class="chongzhi-state" style="margin-top: 10px;"></p>
				<p />
				<p class="chongzhi-state">激活：${detail.startDate}</p>
				<p />
				<p class="chongzhi-state">到期：${detail.endDate}</p>
				<p />
	        </div>
   		</div>
   		<div class="chongzhi-center">
        	<div class="chongzhiCenter-left" style="margin-top: -8px;">
            	<img src="/wx/images/jiankong.png" width="18px;" height="18px;">
            	<font>流量实时监控图</font>
        	</div>
            <div style="margin-left:20px;margin-top:15px;">
				<canvas id="canvas" height="80" width="80"></canvas>
       		</div>
       		<div class="chongzhi-center-bottom">
		   		<div >
					<div class="chongzhi-dian1"></div>
					<p class="dian1Content">剩余：<span id="liuliang1"></span></p>
				</div>
				<div style="margin-top:5px">
					<div class="chongzhi-dian2"></div>
					<p class="dian1Content">已用：<span id="liuliang2"></span></p>
				</div>
	        </div>	
	        <div class="chongzhiCenter-right">
	        	<p>1800M流量充值</p>
    			<p style="color:#a5c0d5;font-size: 8px;">（1800M流量使用期限6个月）</p>
    			<p>收费总计<span>49</span>元</p>
    			
    			<input class="chongzhi-button" type="button" value="立即充值" style="margin-top:20px" onclick="pay()" />
	        </div>
    	</div>
    			
		<div class="chongzhi-bottom">
    		<img src="/wx/images/wenzi.png" width="18px;" height="18px;">
       		<font>流量实时监控图</font>
       		<div class="chongzhi-bottom-Content">
           		<P>	1.此套餐使用期限6个月，共计1800M，到期或者流量用完，本套餐结束。</P>
           		<P>	2.充值套餐将在当前套餐使用结束或者到期后，自动生效。</P>
           		<P>	3.如有任何疑问，可随时联系客服：029-86698009</P>
          	</div>
    	</div>
   				 
 	</div>
</body>
<script>
	var yiyong = 0;
	var remain = 0;
	var used = 100;
	if(${detail.totalData} != "0"){
		yiyong = (${detail.totalData} - ${detail.remain}).toFixed(3);
		remain = parseFloat(((${detail.remain}/${detail.totalData})*100).toFixed(1));
		used = parseFloat((((${detail.totalData} - ${detail.remain})/${detail.totalData})*100).toFixed(1));
	}
	$("#liuliang").html(yiyong);
	$("#liuliang1").html(remain+"%");
	$("#liuliang2").html(used+"%");
	//绘制饼状图
	var pieData = [ {
		    value :remain,
		    color : "#27fcff"
		}, {
		    value :used,
		    color : "#0084ff"
		}];
	new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);
	
	if("${detail.status}" == "ACTIVATED_NAME"){
		$("#status").html("状态：已激活");
	}else if("${detail.status}" == "DEACTIVATED_NAME"){
		$("#status").html("状态：已停用");
	}else if("${detail.status}" == "ACTIVATION_READY_NAME"){
		$("#status").html("状态：可测试(您有1M的测试流量，用完后即正式激活)");
	}
	if("${chongzhi}" == "yes"){
		$("#yi").css("display","inline");
	}
	//付款
	function pay(){
		window.location.href = "http://wechat.ami-tek.com.cn/3bd722ba0a4b/application/wx/oauth2.php?appId=wx7f007a162601553b&redirect_uri=http://www.yxtintin.com/pay/pay&response_type=code&scope=snsapi_base";
		//window.location.href = "http://wechat.ami-tek.com.cn/3bd722ba0a4b/application/wx/oauth2.php?appId=wx7f007a162601553b&redirect_uri=http://1493m75h64.iok.la/pay/pay&response_type=code&scope=snsapi_base";
		
	}
</script>
</html>